<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/mint.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <!-- 引入样式 -->  
    <script src="../assets/js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="../assets/js/mint.js"></script>
    <style type="text/css">
      *{
    margin: 0;
    padding: 0;
      }
      html, body{
          height: 100%;
      }

      #app{

          height: 100%;
          overflow: scroll;
      }

    </style>
  </head>
  <body id="target" >
    <div id="app">
      <div class="topMenu">
        <span class="topMenu_home">星月区 fdfdfdfdfd</span>
        <span class="topMenu_people">个人中心</span>
      </div>
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-distance="150"
                     @top-status-change="handleTopChange" ref="loadmore">
                  <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">{{topStr}}</span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">{{botStr}}</span>
        </div>
          <div id="three_mainAll" class="three_mainAll">
            <div style='height:36px;width:100%;'></div>
            <div class="three_mainAll_header">
              <div class="three_mainAll_header_left">
                
              </div>
              <div class="three_mainAll_header_right">
                <div  class="three_mainAll_header_right1">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
                
              </div>
            </div>
            <div class="three_mainAll_middle">
              <div class="three_mainAll_middle_cell">自带技能</div>
              <div class="three_mainAll_middle_cell">技能1</div>
              <div class="three_mainAll_middle_cell">技能2</div>
            </div>



            <div class="three_mainAll_range">
              <div class="three_mainAll_range_cell">
                <div class="three_mainAll_range_cell_content">
                  <div class="three_mainAll_range_cell_name">攻击</div>
                  <div class="three_mainAll_range_cell_range">
                    <mt-range v-model="rangeValue1" 
                      :min="1"
                      :max="40"
                      :step="1"
                      :disabled=rangeDisabled
                      :bar-height="5">
                        <div slot="start" class="rangeLeft">0</div>
                        <div slot="end" class="rangeRight">40</div>
                      </mt-range>
                  </div>  
                </div>
                
                <div class="three_mainAll_range_cell_num">{{rangeValue1}}</div>      
              </div>
              <div class="three_mainAll_range_cell">
                <div class="three_mainAll_range_cell_content">
                  <div class="three_mainAll_range_cell_name">防御</div>
                  <div class="three_mainAll_range_cell_range">
                     <mt-range v-model="rangeValue2" 
                      :min="1"
                      :max="40"
                      :step="1"
                      :disabled=rangeDisabled
                      :bar-height="5">
                        <div slot="start" class="rangeLeft">0</div>
                        <div slot="end" class="rangeRight">40</div>
                      </mt-range>
                  </div>  
                </div>
                
               <div class="three_mainAll_range_cell_num">{{rangeValue2}}</div>    
              </div>


              <div class="three_mainAll_range_cell">
                <div class="three_mainAll_range_cell_content">
                  <div class="three_mainAll_range_cell_name">速度</div>
                  <div class="three_mainAll_range_cell_range">
                    <mt-range v-model="rangeValue3" 
                      :min="1"
                      :max="40"
                      :step="1"
                      :disabled=rangeDisabled
                      :bar-height="5">
                        <div slot="start" class="rangeLeft">0</div>
                        <div slot="end" class="rangeRight">40</div>
                      </mt-range>
                     
                  </div>  
                </div>
                
                <div class="three_mainAll_range_cell_num">{{rangeValue3}}</div>  
              </div>


              <div class="three_mainAll_range_cell">
                <div class="three_mainAll_range_cell_content">
                  <div class="three_mainAll_range_cell_name">谋略</div>
                  <div class="three_mainAll_range_cell_range">
                    <mt-range v-model="rangeValue4" 
                      :min="1"
                      :max="40"
                      :step="1"
                      :disabled=rangeDisabled
                      :bar-height="5">
                        <div slot="start" class="rangeLeft">0</div>
                        <div slot="end" class="rangeRight">40</div>
                      </mt-range>
                     
                  </div>  
                </div>
                
                <div class="three_mainAll_range_cell_num">{{rangeValue4}}</div>      
              </div>

              <div class="ResetButton">
                <mt-button :style="{'margin':'0 auto'}" size="small" type="primary" @click.native="Reset">重置</mt-button>
              </div>
              
            </div>
          </div>









        </mt-loadmore>
    </div>





<script>
    new Vue({
        el: '#app',
        data: {
          rangeValue1:5,
          rangeValue2:5,
          rangeValue3:5,
          rangeValue4:5,
          allLoaded:false,
          loadNum:0,
          topStatus:'',
          topStr:'',
          botStr:'到下一位武将',
          GeneralArrdata:[

          ],//武将数组
          autoFill:false,
          rangeDisabled:false,
          rangeNumAll:0,
        },
        watch:{
          rangeValue1(){
            let num = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            this.rangeNumAll = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            if(num >= 40){
              this.rangeDisabled = true
            }
          },
          rangeValue2(){
            let num = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            this.rangeNumAll = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            if(num >= 40){
              this.rangeDisabled = true
            }
          },
          rangeValue3(){
            let num = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            this.rangeNumAll = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            if(num >= 40){
              this.rangeDisabled = true
            }
          },
          rangeValue4(){
            let num = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            this.rangeNumAll = this.rangeValue1 + this.rangeValue2 + this.rangeValue3 + this.rangeValue4 
            if(num >= 40){
              this.rangeDisabled = true
            }
          },
          rangeNumAll(){
            if(this.rangeNumAll >40 ){
               this.$toast({
                message: '您手速太快了，请重新设置',
                position: 'center',
                duration: 3000
              });
              this.rangeValue1 = 5
              this.rangeValue2 = 5
              this.rangeValue3 = 5
              this.rangeValue4 = 5
              this.rangeDisabled = false
            }
          }
          
        },
        mounted(){
         

        },
        methods: {
          Reset(){
            this.rangeValue1 = 5
            this.rangeValue2 = 5
            this.rangeValue3 = 5
            this.rangeValue4 = 5
            this.rangeDisabled = false
          },
          start:function(){
            let height = window.screen.availHeight 
            document.getElementById("more").style.height = (height - 57) + "px"
          },
          loadTop:function() {
          // 判断是否是第一次进入，下来是否跳转到 上个武将
          if(this.loadNum === 0){
            // 不切换到上个武将
            this.topStr = ''
          }else{
            this.loadNum = this.loadNum - 1
            this.topStr = '到上一位武将'
            // 切换到上个武将
            // 根据loadNum 去对应的武将的信息，添加到信息中
            let peopel = this.GeneralArrdata[this.loadNum]
            this.rangeValue1 = peopel.attr1
            this.rangeValue2 = peopel.attr2
            this.rangeValue3 = peopel.attr3
            this.rangeValue4 = peopel.attr4
          }
          this.$refs.loadmore.onTopLoaded();
          },
          handleTopChange: function (status) {
                this.topStatus = status;
          },
          loadBottom:function(){
            // alert(8)
            this.loadNum = this.loadNum + 1
            // 判断是否跳转，及上拉需显示内容
            if(this.loadNum > 0){
              this.topStr = '到上一位武将'
            }
            // 第三个武将的时候跳转
            if(this.loadNum > 2){
              // 添加完  武将 ，跳转链接
              this.botStr = ''
              // this.allLoaded = true;// 
              // 每个武将的属性  
              let people = {
                name:"",
                image:'',
                attr1: this.rangeValue1,
                attr2: this.rangeValue2,
                attr3: this.rangeValue3,
                attr4: this.rangeValue4,

              }
              this.GeneralArrdata.push(people)
              // alert('跳转')
              console.log('fdfdfdf')
            }else{
              this.botStr = '到下一位武将'
              // 检验有没有下拉过，判断
              if(this.GeneralArrdata.length  > this.loadNum){
                let peopel = this.GeneralArrdata[this.loadNum]
                this.rangeValue1 = peopel.attr1
                this.rangeValue2 = peopel.attr2
                this.rangeValue3 = peopel.attr3
                this.rangeValue4 = peopel.attr4

              }else{
                 // 每个武将的属性  
                let people = {
                  name:"",
                  image:'',
                  attr1: this.rangeValue1,
                  attr2: this.rangeValue2,
                  attr3: this.rangeValue3,
                  attr4: this.rangeValue4,

                }
                this.GeneralArrdata.push(people)
                console.log(this.GeneralArrdata)
                // 还原武将 的一些列值为默认值
                this.rangeValue1 = 5
                this.rangeValue2 = 5
                this.rangeValue3 = 5
                this.rangeValue4 = 5
              }            

            }
            
            this.$refs.loadmore.onBottomLoaded();
          }       
        }
    });
</script>


  </body>
</html>
